<template>
  <div>
      <h1>基尼太美</h1>
      <button @click="num++">{{num}}</button>
  </div>
</template>

<script>
import { createLogger } from 'vuex'
// 将要创建数据=>数据创建完毕=>将要显示到页面=>页面显示完毕=>将要更新=>更新完毕=>将要销毁=>销毁完毕
// 生命周期的作用
// 1.自动发送网络请求
// 在组件显示时,mounted中触发请求操作

// 2.面试题:是否可以在创建阶段发送请求?
// created阶段:能提前几毫秒,但是一旦小概率挂载到页面上失败,则请求属于浪费流量
// mounted:晚几毫秒(用户不可感知),请求的数据一定用的上,更稳妥

// 3.除了mounted 发请求,其他周期有什么用?
// 面试用 -- 生命周期属于常识稳妥,必须要掌握
  export default {
    data() {
      return {
        num: 1
      }
    },
    // 声明周期的钩子函数
    // 声明周期:组件从 创建 出生 更新 销毁的过程 -- 组件的一生
    // 钩子函数:一类特殊的函数 -- 在固定的时机自动触发
    // https://v2.cn.vuejs.org/v2/api/

    // 创建阶段:完成 选项中数据部分的 操作
    beforeCreate(){
      // before:在..之前
      console.log('beforeCreate:即将创建完成');
    },
    created(){
      console.log('created:组件创建完毕');
    },

    // ---------------------------------------------
    
    // 组件出生,显示到页面上
    beforeMount(){
      console.log('beforeMount:即将挂载到页面展示');
    },
    mounted(){
      console.log('mouted:已经展示到页面上');
    },
    
    // ---------------------------------------------

    // 更新时
    beforeUpdate(){
      console.log('beforeUpdate:数据修改 但页面还未更新');
    },
    updated(){
      console.log('updated:数据修改 页面完成更新');
    },

    // ---------------------------------------------

    // 删除组件中的所有数据
    beforeDestroy() {
      console.log("beforeDestroy:即将销毁");
    },
    destroyed(){
      console.log("destroyed:即将销毁");
    }
  }
</script>

<style lang="scss" scoped>

</style>